<template>
    <div class="outmain ba_f">
      <div class="ba_f outmain">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="排队取号" name="storequeuingdetails"></el-tab-pane>
          <el-tab-pane label="桌位类型" name="storequeuingtype"></el-tab-pane>
          <el-tab-pane label="排队设置" name="storequeuingset"></el-tab-pane>
        </el-tabs>
      </div>
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>桌位类型</span>
            </div>
        </div>
        <div>
            <el-button type="primary" size="medium" @click="handleEdit">新增桌位类型</el-button>
            <el-button size="medium" @click="handleDelete">批量删除</el-button>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    :element-loading-text="elementLoadingText"
                    stripe
                    row-key="id"
                    style="width: 100%"
                    @selection-change="setSelectRows">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                >

                </el-table-column>
                <el-table-column
                        prop="name"
                        label="桌位类型"
                >
                </el-table-column>
                <el-table-column prop="num" label="就餐人数" >
                  <template slot-scope="scope">
                    <div class="flex">
                      <div>{{scope.row.min}}~{{scope.row.max}}人</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="minute" label="等待时间" >
                  <template slot-scope="scope">
                    <div class="flex">
                      <div>{{scope.row.minute}}分钟</div>
                    </div>
                  </template>
                </el-table-column>
              <el-table-column
                  label="状态"
              >
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                             @change="changeSwitch(scope.row)"></el-switch>
                </template>
              </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.size"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>
    </div>
</template>
<script>
    import Edit from "../../../plugin/lineUp/components/gspecedit";
    import {typeList,modifyType} from "@/api/plug";
    import {mapState} from "vuex";

    export default {
        components: {Edit},
        created() {
            this.fetchData();
        },
        computed: {
          ...mapState(['storeId']),
        },
        data() {
            return {
              activeName: 'storequeuingtype',
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
          handleClick() {
            if (this.activeName == 'storequeuingdetails') {
              this.$router.push({path: 'storequeuingdetails'});
            } else if (this.activeName == 'storequeuingtype') {
              this.$router.push({path: 'storequeuingtype'});
            }else if (this.activeName == 'storequeuingset') {
              this.$router.push({path: 'storequeuingset'});
            }
          },
            async fetchData() {
                const {data, count} = await typeList({page: this.page.currentPage,storeId:this.storeId,});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleEdit(row) {
                this.$refs["edit"].setStoreId(this.storeId);
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyType({id: row.id,type:2,storeId:this.storeId,});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyType({id,type:2,storeId:this.storeId,});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            async changeSwitch(row) {
                const {msg} = await modifyType({id: row.id, display: row.display,type:1,storeId:this.storeId,});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
        }
    }
</script>
